<template>
    <table border="1" width="600">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>头像</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="index">
            <td>{{ index+1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{item.age}}</td>
            <td>
                <!-- 作用域插槽 -->
                <slot :row="item" ></slot>
                <!-- {{ item.headImgUrl }} -->
                <!-- <img :src="item.headImgUrl" alt=""> -->
                <!-- <slot></slot> -->
            </td>
        </tr>
    </table>
</template>

<script>
export default {
    props: {
        arr: {
            type: Array,
            required: true
        }
    }
}
</script>

<style>
table{
    margin: 0 auto;
}
</style>